<template>
    <basic-container>
        <avue-crud
                ref="scopeTree"
                :data="tableData"
                :option="option"
                :page="page"
                :destroy-on-close="true"
                @on-load="onLoad"
                @refresh-change="searchHandler"
                @row-del="rowDelete"
                @row-update="rowUpdate"
                @row-save="rowSave"
                @search-change="searchChange"
        >
        </avue-crud>
    </basic-container>
</template>

<script>
    import {addStudent, getStudent, updateStudent, deleteStudent} from "@/api/basic/studentInfo"
    import {baseUrl} from '@/config/env'

    export default {
        name: "stuClass",
        data() {
            return {
                page: {
                    pageSize: 10,
                    total: 100
                },
                searchForm: {
                    currentPage: 1,
                    pageSizes: 10
                },
                tableData: [],
                option: {
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    stripe: true,
                    menuAlign: 'center',
                    editBtn: true,
                    delBtn: true,
                    searchMenuSpan: 6,
                    align: 'center',
                    addBtn: true,
                    viewBtn: true,
                    column: [{
                        search: true,
                        label: '学号',
                        prop: 'studentKey',
                        span: 24,
                        rules: [{
                            required: true,
                            message: '学号不能为空',
                            trigger: 'blur'
                        }]
                    },{
                        search: true,
                        label: '姓名',
                        prop: 'name',
                        span: 24,
                        rules: [{
                            required: true,
                            message: '姓名不能为空',
                            trigger: 'blur'
                        }]
                    },{
                        search: false,
                        label: '政治面貌',
                        prop: 'politicsStatus',
                        span: 24,
                    },{
                        search: true,
                        label: '所属班级',
                        prop: 'classId',
                        type: 'select',
                        remote: true,
                        props: {
                            label: 'className',
                            value: 'id'
                        },
                        dicUrl: `${baseUrl}/pc/stu-class/byName`,
                        span: 24,
                        rules: [{
                            required: true,
                            message: '所属班级不能为空',
                            trigger: 'blur'
                        }]
                    }, {
                        search: true,
                        label: '所属支部',
                        prop: 'departmentId',
                        type: 'select',
                        remote: true,
                        addDisplay: false,
                        editDisplay: false,
                        props: {
                            label: 'name',
                            value: 'id'
                        },
                        dicUrl: `${baseUrl}/pc/department/all`,
                        span: 24,
                        rules: [{
                            required: true,
                            message: '所属支部不能为空',
                            trigger: 'blur'
                        }]
                    }]
                }
            }
        }, methods: {
            rowSave(form, done, loading) {
                loading()
                addStudent(form).then(() => {
                    this.$message.success('添加成功')
                    this.searchHandler()
                }).finally(() => {
                    done()
                })
            },
            rowUpdate(row, index, done, loading) {
                loading()
                updateStudent(row).then(() => {
                    this.$message.success('更新成功')
                    this.searchHandler()
                }).finally(() => {
                    done()
                })
            },
            rowDelete(form) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteStudent([form.id]).then(() => {
                        this.$message.success('删除成功')
                        this.searchHandler()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            searchChange(params, done) {
                this.searchForm = params
                this.searchForm.currentPage = 1
                this.searchForm.pageSizes = 10
                this.searchHandler()
                done()
            },
            onLoad(page) {
                this.searchForm.currentPage = page.currentPage
                this.searchForm.pageSize = page.pageSize
                this.searchHandler()
            },
            searchHandler() {
                getStudent(this.searchForm).then(res => {
                    this.tableData = res.data.records
                    this.page.total = res.data.total
                })
            }
        }
    }
</script>

<style scoped>
</style>
